<script setup lang="ts">
defineOptions({
  name: "ScrollXNews"
});

withDefaults(
  defineProps<{
    newsList?: any[];
  }>(),
  {
    newsList: () => []
  }
);
const router = useRouter();
const clickATag = (id: number) => {
  if (!id) return;
  router.push(`/news/detail/${id}`);
};
</script>
<template>
  <div class="scroll">
    <a
      class="scroll-item"
      v-for="(it, index) in newsList"
      :key="index"
      @click="clickATag(it.id)"
    >
      <div class="cover-logo">
        <van-image
          class="img"
          width="100%"
          :height="`${100 / 36}rem`"
          fit="cover"
          :src="it.cover"
        >
        </van-image>
      </div>
      <div class="bottom">
        <div class="title text-ellipsis-4">
          {{ it.title }}
        </div>
        <div class="date">{{ it.publish_date }}·{{ it.media }}</div>
      </div>
    </a>
  </div>
</template>
<style scoped lang="less">
.scroll {
  display: flex;
  justify-content: flex-start;
  column-gap: 10px;
  overflow-x: auto;
  .scroll-item {
    background: #ffffff;
    box-shadow: 0px 2px 5px 1px rgba(159, 159, 159, 0.23);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    row-gap: 10px;

    &:first-of-type {
      margin-left: 10px;
    }
    &:last-of-type {
      margin-right: 10px;
    }
    .cover-logo {
      width: 200px;
      border-radius: 8px 8px 0px 0px;
      font-size: 0;
      .img {
        width: 100%;
        height: 100px;
        ::v-deep {
          img {
            border-radius: 8px 8px 0px 0px;
          }
        }
      }
    }
    .bottom {
      display: flex;
      flex-direction: column;
      row-gap: 10px;
      flex: 1;
      justify-content: space-between;
      .title {
        font-weight: 500;
        font-size: 12px;
        color: #444444;
        padding: 0 8px;
      }
      .date {
        font-weight: 300;
        font-size: 10px;
        color: #666666;
        padding: 0 8px 10px;
      }
    }
  }
}
</style>
